<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div id="app">
    <table border="1">
        <thead>
            <tr>
                <th>状态</th>
                <th>商品ID</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item,index) in arr" :key="item.id">
                <td><input type="checkbox" @click="zj(item.id)" v-module="item.is"></td>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td><button @click="ja(item.id)">-</button>{{item.num}}<button @click="jan(item.id)">+</button></td>
            </tr>
        </tbody>
    </table>
    <div>{{sun | currency}}</div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            arr:[{
                id:1,
                name:'鸡',
                price:20,
                num:1,
                is:false
            },{
                id:2,
                name:'鸭',
                price:18,
                num:1,
                is:false
            },{
                id:3,
                name:'牛',
                price:60,
                num:1,
                is:false
            }],
        },
        methods:{
            ja(id){
                var arr = this.arr.find(item=>item.id == id)
                if(arr.num > 1){
                    arr.num --
                }
            },
            jan(id){
                var arr = this.arr.find(item=>item.id == id)
                    arr.num ++
            },
            zj(id){
                this.arr.find(item=>item.id == id).is = !this.arr.find(item=>item.id == id).is
            },
        },
        computed:{
            sun(){
                var sun = 0
                this.arr.forEach(item => {
                    if(item.is == true){
                        sun += item.num * item.price
                    }
                })
                return sun
            },
            },
            filters:{
                currency(value){
                    return '¥'+value.toFixed(2)
                }
            }
    })
</script>